<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
	margin: 0;
	padding: 0;
}

.small{
	width: 400px;
	height: 400px;
	position: relative;
	border:4px solid #ddd;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.conTainer{
	width: 400px;
	height: 400px;
	position: relative;
	margin-left: 200px;
	margin-top: 100px;
}
.small img{
	width: 100%;
	height: 100%;
}
.small .wrap{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
	/* background: rgba(0, 0, 0, 0.3); */
}

.small .grayBox{
	display: none;
	width: 100px;
	height: 100px;
	background-size:400px 400px;
	background-position: 0 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0;
	top: 0;
}	

.big{
	width: 400px;
	height: 400px;
	position: absolute;
	left: 700px;
	top: 100px;
	border:1px solid #f10;
	display: none;
	overflow: hidden;
}
.big img{
	position: absolute;
	width: 1600px;
	height: 1600px;
}

.choice-btn {
	position: absolute;
	bottom: -112px;
	width: 100%;
}
.choice-btn img{
	width: 100px;
	height: 100px;
	border: 2px solid #fff;
}
.choice-btn img:hover{
	border-color: #000;
}
    </style>
</head>
<body>
	<!-- 左侧放大镜容器 -->
    <div class="conTainer">
	    <!-- 小图容器 -->
        <div class="small">
			<!-- 贴膜 -->
            <div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
            <img src="images/timg.jpg" alt="">
			<!-- 小盒子 -->
            <span class="grayBox"></span>
        </div>
        <div class="choice-btn">
			<img src="images/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
        </div>
    </div>
	<!-- 大图容器 -->
    <div class="big">
		<!-- 大图图片 -->
        <img src="images/timg.jpg" alt="">
    </div>
</body>
<script>
    function Magnifier(){
        //小盒子
        this.square = document.querySelector('.grayBox');
        //小图容器
        this.small = document.querySelector('.small');
        //小图容器图片
        this.small_img = document.querySelector('.small img');
        //大图容器
        this.big = document.querySelector('.big');
        //大图图片
        this.big_img = document.querySelector('.big img');
        //切换图图片
		this.btns = document.querySelectorAll(".choice-btn img");
        //设置索引
        this.index = 0;

        //获取小图容器宽高
        this.small_size = {
            width: this.small.offsetWidth,
            height: this.small.offsetHeight
        }
        //获取小正方形宽高
        this.square_size = {
            width: parseInt(getComputedStyle(this.square).width),
            height: parseInt(getComputedStyle(this.square).height)
        }
        //获取大图容器宽高
        this.big_size = {
            width: parseInt(getComputedStyle(this.big).width),
            height: parseInt(getComputedStyle(this.big).height)
        }
        //获取大图宽高
        this.big_img_size = {
            width: parseInt(getComputedStyle(this.big_img).width),
            height: parseInt(getComputedStyle(this.big_img).height)
        }
        //调用
		this.bindEvent();
    }

    Magnifier.prototype.bindEvent = function(){
        var self = this;
        //移入显示
        this.small.onmouseover = function(){
            self.square.style.display = 'block';
            self.big.style.display = 'block';
        }
        //移入隐藏
        this.small.onmouseout = function(){
            self.square.style.display = 'none';
            self.big.style.display = 'none';
        }
        //移动显示
        this.small.onmousemove = function(eve){
            var e = eve || window.event;
			// 边界检测 : 先计算再赋值; 
			// 找极值; 判定边界;
			// 数据的预处理 : 
            var _left = e.offsetX - 50;
            var _top = e.offsetY - 50;
            //设定左边边界
            if(_left < 0){
                _left = 0;
            }
            //设置top上边边界
            if(_top < 0){
                _top = 0;
            }
            //拿到最宽高距离
            var max_left = self.small_size.width - self.square_size.width - 8;
            var max_top = self.small_size.height - self.square_size.height - 8;
            //设定最右边边界
            if(_left > max_left){
                _left = max_left;
            }
            //设定botton最下边边界
            if(_top > max_top){
                _top = max_top;
            }
            self.square.style.left = _left + 'px';
            self.square.style.top = _top + 'px'; 
            //计算位移百分比
            var prop_left = (_left / max_left).toFixed(2);
            var prop_top = (_top / max_top).toFixed(2);
            //大盒子最大移动距离
            var big_box_max_left = self.big_img_size.width - self.big_size.width;
            var big_box_max_top = self.big_img_size.height - self.big_size.height;
            //计算距离
            self.big_img.style.left = -big_box_max_left * prop_left + 'px';
            self.big_img.style.top = -big_box_max_top * prop_top + 'px';
        }
        for(var i=0;i<this.btns.length;i++){      
            this.btns[i].index = i;
            this.btns[i].onmouseover = function(){
                self.index = this.index;
                self.small_img.src = this.src;
                self.big_img.src = this.src;
            }   
        }
    }
    var fw = new Magnifier()
</script>
</html>